<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- layui的核心css-->
    <link rel="stylesheet" href="../css/layui.css">
    <!-- layui的核心js-->
    <script src="../layui.js"></script>
</head>
<body>
<!-- 
    表单:
        常用属性：
            required   浏览器必填字段
            lay-verify  需要验证的类型（required表示必填）
            class='layui-input'    提供的通用的样式
            .layui-input-inline   占据部分宽度
            .layui-input-block   占据全部宽度
            通过追加 layui-form-pane 的class，来设定表单的方框风格。
        文本框
            placeholder   当文本框为空时，默认的文本
            autocomplete  表单元素是否自动填充(当浏览器中缓存中存在
            相同name属性值时，会填充)

 -->

    
    <!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块， -->
    <form action="" class="layui-form layui-form-pane">
        <!-- 基本的行区块结构，它提供了响应式的支持.你可以换成你的结构，
            但必须要在外层容器中定义class="layui-form"，
            form模块才能正常工作。 -->
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <!-- <input type="text" name="tittle" class="layui-input"> -->
                <input 
                type="text"
                 name="title" 
                 required 
                 lay-verify="required" 
                placeholder="请输入标题" 
                autocomplete="off" 
                class="layui-input"> 
            </div>
        </div>
<!-- 下拉选择 -->
        <div class="layui-form-item">
            <label class="layui-form-label">城市</label>
            <div class="layui-input-inline">
               <!-- 下拉选择框 -->
               <!-- 1.通过selected属性设置默认选中项-->
               <!-- 2. 通过disabled设置禁用属性 可以设置select和option标签-->
               <!-- 3.可以通过optgroup 标签给select分组-->
               <!-- 4. 通过设定lay-search属性开启搜索匹配功能-->
               <select name="city" lay-verify="required" >
                    <option value="">请选择一个城市</option>
                    <option value="010">北京</option>
                    <option value="021" selected>上海</option>
                    <option value="0571" disabled>杭州</option>
              </select> 
              <!-- 分组 -->
              <select name="quiz">
                <option value="">请选择</option>
                <optgroup label="城市记忆">
                  <option value="你工作的第一个城市">你工作的第一个城市？</option>
                </optgroup>
                <optgroup label="学生时代">
                  <option value="你的工号">你的工号？</option>
                  <option value="你最喜欢的老师">你最喜欢的老师？</option>
                </optgroup>
              </select> 
              <!-- 开启搜索 -->
              <select name="city" lay-verify="" lay-search>
                <option value="">请选择</option>
                <option value="010">layer</option>
                <option value="021">form</option>
                <option value="0571" >layim</option>
                ……
              </select>      
            </div>
        </div>

 <!-- 复选框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
                <!-- 复选框 -->
                <!-- 1.通过title属性设置自定义文本(如果不需要显示文本，则不需要设置title属性) -->
                 <!-- 2.通过checked设置被选中的选项 -->
                 <!-- 3.通过lay-skin设置复选框的样式效果 （lay-skin="primary"表示原始效果）-->
                 <!-- 4.通过disabled 属性设置禁用效果-->
                <!-- 默认效果 -->
                <input type="checkbox" name="hobby" title="唱歌" value="sing">
                <input type="checkbox" name="hobby" title="跳舞" value="dance">
                <input type="checkbox" name="hobby" title="画画" value="drawing">
                <br>
                <!-- 原始效果 -->
                <!-- checked 默认选中 -->
                <input type="checkbox" name="hobby" title="唱歌" disabled lay-skin="primary" value="sing">
                <input type="checkbox" name="hobby" title="跳舞" checked lay-skin="primary" value="dance">
                <input type="checkbox" name="hobby" title="画画" checked lay-skin="primary"  value="drawing">
           </div>
     </div>

<!--开关  -->
     <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
           <!-- 开关
                将复选框，设置lay-skin="switch",形成一个开关风格
                1.通过iay-text="打开的值|关闭的值"
                2.设置checked默认打开状态
                3.听过disabled属性禁用开关
                4.通过value属性设置选中提交的值
        -->
           <input type="checkbox" name="aa"  lay-skin="switch">
           <input type="checkbox" name="bb"  lay-skin="switch" checked>
           <input type="checkbox" name="cc"  lay-skin="switch" checked lay-text="on|off">
           <input type="checkbox" name="dd"  lay-skin="switch" checked lay-text="打开|关闭" value="打开">
           <input type="checkbox" name="ee"  lay-skin="switch" checked lay-text="打开|关闭" disabled>
        </div>
    </div>

<!--单选框  -->
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <!-- 单选框 
            1.设置checked默认选中
            2.听过disabled属性禁用
            3.通过value属性设置选中提交的值
            4.
        -->
            <input type="radio" name="sex" value="nan" title="男">
            <input type="radio" name="sex" value="nv" title="女" checked>
            <input type="radio" name="sex" value="" title="中性" disabled>
        </div>
    </div>

    <!-- 文本域 -->
    <div class="layui-form-item">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-inline">
            <!-- 文本域 
                class="layui-textarea"  layui.css提供的通用样式
        -->
           <textarea name="remark" required lay-verify="required" placeholder="请输入个人简介"
           class="layui-textarea"></textarea>
        </div>
    </div>

    <!-- 组装行内表单 
        class="layui-inline"：定义外层行内
        class="layui-input-inline"：定义内层行内
    -->

    <div class="layui-form-item">
        <!-- 定义外层行内 -->
        <div class="layui-inline">
            <label class="layui-form-label">范围</label>
            <div class="layui-input-inline">
                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

<!-- 忽略美化渲染 -->
    <div class="layui-form-item">
        <label class="layui-form-label">原始效果</label>
        <!-- 对表单元素增加属性 lay-ignore 设置后，
            将不会对该标签进行美化渲染，即保留系统风格 -->
        <div class="layui-input-inline">
            <input type="radio" name="sex" value="nan" title="男" lay-ignore >
        </div>
    </div>

    <hr>
    <!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
    <form class="layui-form layui-form-pane" action="">
        <!-- 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如： -->
        <div class="layui-form-item" pane>
          <label class="layui-form-label">单选框</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
          </div>
        </div>

        <!-- 按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-inline">
              <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
    </form>


    <!-- 加载模块 -->
    <script>
        layui.use('form', function(){
        var form = layui.form;
        });
    </script>
</body>
</html>